﻿@{
    Layout = "~/Views/Shared/_EditDialog.cshtml";  
}
@using SRF.UI.Html

@section header{
    <link href="@Url.Content("~/Scripts/zTree/css/zTreeStyle/zTreeStyle.css")" rel="stylesheet" type="text/css"/>
    <script src="@Url.Content("~/Scripts/jquery-ui/js/jquery.ui.core.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui/js/jquery.ui.widget.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui/js/jquery.ui.mouse.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui/js/jquery.ui.draggable.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/bootstrap/js/bootstrap-modal.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.cookie.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/dialog.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/zTree/js/jquery.ztree.all-3.5.min.js")" type="text/javascript"></script>
    <style type="text/css">
        .leftpanel
        {
            float: left;
            width: 200px; 
            border-right: 1px solid #eee;
        }
        #rolelist
        { 
            }
        .leftpanel select
        {
            width: 100%;
            overflow: hidden;
        }
        .rightpanel
        {
            margin-left: 210px;
        }
        .ztree
        {
            min-height:300px;
            }
        
    </style>
    <script type="text/javascript" language="javascript"> 
@{ 
    var html = Html.TreeJson<SRF.Admin.Models.Role>("roleData", ViewBag.RoleList as IList<SRF.Admin.Models.Role>, m => m.Id, null, m => m.Name);
    html += ";" + Html.TreeJson<SRF.Admin.Models.Permission>("permissionData", ViewBag.PermissionList as IList<SRF.Admin.Models.Permission>, m => m.Id, m => m.ParentId, m => m.Name, "功能列表");
    @Html.Raw(html)
} 
    </script>
    <script type="text/javascript" language="javascript">
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    rootPId: null
                }
            } 
        };
        //初始化
        $(function () {
            var roleTreeSetting = $.extend(true, {
                callback: {
                    onClick: function (event, treeId, treeNode) {
                        if (treeNode.id) {
                            onSelectRole(treeNode.id, treeNode.type);
                            $("#permissionlist").removeAttr("disabled");
                        }
                        else {
                            $("#permissionlist").attr("disabled", "disabled");
                        }
                    }
                }
            }, setting);
            var permissionTreeSetting = $.extend(true, {
                check: {
                    enable: true,
                    chkStyle: "checkbox",
                    nocheckInherit: true
                },
                callback: {
                    onCheck: function (event, treeId, treeNode) {
                        var roleId = $.fn.zTree.getZTreeObj("rolelist").getSelectedNodes()[0].id; 
                        if (roleId) {
                            var zTree = $.fn.zTree.getZTreeObj(treeId);
                            var chkNodes = zTree.getCheckedNodes(true);
                            var permissionIds = [], i = 0;
                            $.each(chkNodes, function () {
                                if (this.id) {
                                    permissionIds[i] = this.id;
                                    i++;
                                }
                            });
                            $.post("SaveAuth", { roleId: roleId, permissionIds: permissionIds }, function () {
                            });
                        }
                    }
                }
            }, setting);

            $.fn.zTree.init($("#rolelist"), roleTreeSetting, roleData);
            $.fn.zTree.init($("#permissionlist"), permissionTreeSetting, permissionData);
            //默认全部展开节点
            $.fn.zTree.getZTreeObj("permissionlist").expandAll(true);
        });
        function onSelectRole(roleId) {
            var url = "GetPermissions?random=" + Math.random();
            $.get(url, { roleId: roleId }, function (data) {
                var permissionlist = $.fn.zTree.getZTreeObj("permissionlist");
                permissionlist.checkAllNodes(false);
                var nodes = permissionlist.getNodesByFilter(function (n) {
                    var exist = false;
                    for (var i = 0; i < data.length; i++) {
                        if (n.id && n.id.toLowerCase() == data[i].toLowerCase()) {
                            exist = true; break;
                        }
                    }
                    return exist;
                });
                $.each(nodes, function (i, n) {
                    permissionlist.checkNode(this, true);
                })
            })
        }
        function expandTree(flag) {
            if (flag == undefined)
                flag = true;
            $.fn.zTree.getZTreeObj("permissionlist").expandAll(flag);
        }
    </script>
}
<div>
    <div class="leftpanel">
        <span>角色列表</span>
        <ul id="rolelist" class="ztree">
        </ul>
    </div>
    <div class="rightpanel">
        <span>功能列表</span><a href="javascript:expandTree();" style="display:inline-block; margin:1px 3px; font-weight:bolder" title="全部展开">+</a><a href="javascript:expandTree(false);" style="display:inline-block; margin:1px 3px; font-weight:bolder" title="全部折叠">-</a>
        <ul id="permissionlist" class="ztree">
        </ul>
    </div>
</div>
